<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>登录页面</title>
</head>
<body>
<div class="top">
	<ul>
		<li><p>欢迎登录&nbsp&nbsp</p></li>
		<li style="color:#4876FF;">购票登录</li>&nbsp&nbsp|
		<li>&nbsp&nbsp<a href="main.html#/index">返回主页</a></li>
	</ul>
</div>
<div class="all" id="all">
	<form class="all-form">
		<span class="all-form-span">用户登录</span>

		<div class="all-form-body">
			<input type="text" class="all-form-body-input" v-model="userName" placeholder="账号/用户名">
		</div>
		<div class="all-form-body">
			<input type="password" class="all-form-body-input" v-model="password" placeholder="密码/登录密码">
		</div>
		<div class="all-form-body" style="margin-top:10px; font-size:16px; color:#FF0000;">
			{{message}}
		</div>
		<div class="all-form-body">
			<button type="button" class="all-form-button" v-on:click="submit()">立即登录</button>
		</div>
		<div class="zhuce">
			<ul>
				<li style="color:#4876FF;"><a href="logon.html">注册账号<a></li>&nbsp&nbsp|
				<li>&nbsp<a>忘记密码？</a></li>
			</ul>
			<hr>
			<ul>
				<li style="font-size:13px;">1·网站每日06:00~23:30提供服务。</li><br>
				<li style="font-size:13px;">2.网站购票、改签和退票须不晚于开车前25分钟;办理 变更到站 业务时,不晚于开车前48小时。</li>
			</ul>
		</div>
	</form>
</div>

<div class="bottom">
	<ul>
		<li>车票管理系统</li>
	</ul>
</div>
</body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>


<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
	new Vue({
		el : '#all',
		data : {
		    userName : '',
		    password : '',
		    message : '',
		},
		methods : {
			submit :function(){
				var target = this;
				axios.post('/common/login', {
					  userName: this.userName,       
					  password: this.password  
				  })
				  .then(function (response) {
					  var success = response.data.success;
					  
					  if(success == false){
						  target.message = response.data.errorName + "!";
					  }else{
						  window.location.href = "/main.html#/index";
					  }
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
		}
	})
</script>
<style type="text/css">
	a:hover{
		color:#EE0000;
	}
	body,a{
		margin:0px;
		text-decoration:none;
	}
	.top{
		width:auto;
		height:100px;
		padding-top:8px;
		padding-bottom:8px;
		margin-bottom:5px;
		border-bottom:double 1px #3B3B3B;
	}
	.top ul li{
		list-style:none;
		display:inline;
	}
	.top ul li p{
		display:inline;
		font-size:36px;
	}
	.all{
		background-color:#CDBA96;
		background-image:url("./images/风景.jpg");
		background-size:100%;
		height:600px;
		margin:auto;
		padding-top:60px;
		border:double 1px #E8E8E8;
	}
	.all-form{
		background:#FFFFFF;
		border-radius: 12px;
		border:double 2px #404040;
		margin:auto 1350px;
		padding:60px 60px 0px 60px;
		height:460px;
		width:300px;
	}
	.all-form-span{
		color:#4876FF;
		font-size:28px;
	}
	.all-form-body{
		margin-top:6px;
	}
	.all-form-body-input{
		border:double 2px #CDC5BF;
		margin-top:20px;
		padding:8px 8px;
		height:20px;
		width:280px;
	}
	.all-form-button{
		background-color:#FF8C00;
		color:#FFFFFF;
		margin-top:5px;
		width:300px;
		height:33px;
	}
	.zhuce ul li{
		display:inline;
		list-style:none;
	}
	.all2{
		height:280px;
		padding-top:20px;
		padding-left:30px;
		background-color:#FFFFFF;
	}
	.all2 ul li{
		margin-top:5px;
		list-style:none;
	}
	.bottom{
		background-color:#787878;
		height:120px;
		margin-top:6px;
		border-bottom:double 2px #3B3B3B;
		border-top:double 2px #3B3B3B;
		padding-top:30px;
	}
	.bottom ul li{
		list-style:none;
		text-align:center;
		font-size:22px;
		color:#FFFFFF;
	}
</style>
</html>
